<template>
	<div class="productDatil">
		<div class="home_body_banner">
			<swiper :options="swiperOption" v-if='picture.length!=1'>
				<swiper-slide v-for="(slide, key) in picture" :key="key"><a><img :src='slide.l_img'></a></swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div class="productDatil-top">
			<div class="productDatil-top1 clear2">
				<p>￥1880.00</p>
				<p>已兑换4865件</p>
			</div>
			<div class="productDatil-top2 clear2">
				<p>兑换价:</p>
				<p>1880</p>
				<p>匠子</p>
			</div>
			<div class="productDatil-top3 clear2">
				<p>万岛夫人</p>
				<p>即食燕窝</p>
			</div>
		</div>
		<div class="productDatil-Label">
			<img src="../../../../static/img/images/productdatil2.jpg" />
		</div>
		<div class="productDatil-block">
			<div class="productDatil-blockTitle">
				产品参数
			</div>
			<div class="productDatil-blockContent">
				<p class="productDatil-blockContentP">产品名称：万岛夫人即食燕窝</p>
				<p class="productDatil-blockContentP">产品产地：福建厦门</p>
				<p class="productDatil-blockContentP">保质周期：18个月</p>
				<p class="productDatil-blockContentP">产品规格：70g*3</p>
				<p class="productDatil-blockContentP">快递费用：¥20.00</p>
				<p class="productDatil-blockContentP">服务信息：0571-87655992</p>
			</div>
		</div>
		<div class="productDatil-block" style="width: 100%;padding: 1rem 0;">
			<div class="productDatil-blockTitle" style="margin-left: 2%;">
				产品详情
			</div>
			<div class="productDatil-blockContent" style="padding: 1rem 0;">
				<img src="../../../../static/img/liangDatil/0.jpg" />
				<img src="../../../../static/img/liangDatil/1.jpg" />
				<img src="../../../../static/img/liangDatil/2.jpg" />
				<img src="../../../../static/img/liangDatil/3.jpg" />
				<img src="../../../../static/img/liangDatil/4.jpg" />
				<img src="../../../../static/img/liangDatil/5.jpg" />
				<img src="../../../../static/img/liangDatil/6.jpg" />
				<img src="../../../../static/img/liangDatil/7.jpg" />
				<img src="../../../../static/img/liangDatil/8.jpg" />
				<img src="../../../../static/img/liangDatil/9.jpg" />
				<img src="../../../../static/img/liangDatil/10.jpg" />
			</div>
		</div>
		<p-Footer></p-Footer>
	</div>
</template>

<script>
	import pFooter from '../../common/pfooter.vue';
	require('swiper/dist/css/swiper.css');
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components:{
            pFooter,
            swiper,
			swiperSlide
        },
		data: function() {
			
			return {
				picture:[{
					'l_img':'../../../../static/img/images/productdatil.jpg'
				},{
					'l_img':'../../../../static/img/images/productdatil.jpg'
				},{
					'l_img':'../../../../static/img/images/productdatil.jpg'
				}],
				swiperOption: {
					autoplay: 5000,
					initialSlide: 1,
					loop: true,
					pagination: '.swiper-pagination',
					onSlideChangeEnd: swiper => {
						//						console.log('onSlideChangeEnd', swiper.realIndex)
					},
				},
				
			}
		},
		mounted() {
        	
		},
		methods: {
			purchase(){
				this.Toast('匠子余额不足')
			},
		}
	}
</script>

<style scoped>
	
	.home_body_banner{
		width: 100%;
		background: #b5b5b5;
		font-size: 3rem;
		text-align: center;
		font-weight: bold;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
	.productDatil-top{
		margin: 0rem 2%;
		border-bottom: 1px solid #868686;
		width: 96%;
	}
	.productDatil-top1{
		width: 100%;
		height: 2.4rem;
		overflow: hidden;
	}
	.productDatil-top1 p:nth-child(1){
		font-size: 1.8rem;
		display: flex;
		float: left;
		height: 2.4rem;
		align-items: flex-end;
		font-family: "微软雅黑";
	}
	.productDatil-top1 p:nth-child(2){
		font-size: 1rem;
		display: flex;
		float: right;
		color: #808080;
		height: 2.4rem;
		align-items: flex-end;
	}
	.productDatil-top2{
		width: 100%;
		height: 2.7rem;
		overflow: hidden;
		
	}
	.productDatil-top2 p:nth-child(1){
		font-size: 1.2rem;
		display: flex;
		color: #666;
		float: left;
		height: 2.7rem;
		padding-right: 0.5rem;
		align-items: flex-end;
		font-family: "微软雅黑";
	}
	.productDatil-top2 p:nth-child(2){
		font-size: 1.8rem;
		display: flex;
		height: 2.7rem;
		padding-top: 0.2rem;
		padding-right: 0.2rem;
		float: left;
		align-items: flex-end;
	}
	.productDatil-top2 p:nth-child(3){
		font-size: 1.3rem;
		float: left;
		display: flex;
		height: 2.7rem;
		align-items: flex-end;
	}
	.productDatil-top3{
		width: 100%;
		height: 3.7rem;
		overflow: hidden;
		
	}
	.productDatil-top3 p:nth-child(1){
		font-size: 1.4rem;
		float: left;
		line-height: 3.7rem;
	}
	.productDatil-top3 p:nth-child(2){
		font-size: 1.3rem;
		float: left;
		line-height: 3.7rem;
	}
	.productDatil-Label{
		width: 96%;
		margin: 0 auto;
		border-bottom: 1px dashed #898989;
	}
	.productDatil-Label img{
		width: 100%;
		display: block;
	}
	
	
	.productDatil-block {
		padding: 1rem 2%;
		width: 96%;
	}
	
	.productDatil-blockTitle {
		padding: 0 1rem;
		font-size: 1.4rem;
		line-height: 2rem;
		border-radius: 5rem;
		display: inline-block;
		background: #000;
		color: #f9ecc2;
	}
	
	.productDatil-blockContent {
		padding: 1rem 0.8rem;
	}
	
	.productDatil-blockContentP {
		color: #585858;
		font-size: 1.3rem;
		line-height: 2rem;
	}
	.productDatil-blockContent img {
		width: 100%;
		display: block;
	}
</style>
<style>
	.home_body_banner .swiper-pagination{
		bottom: 0 !important;
	}
	
	.home_body_banner .swiper-pagination-bullet{
		background: #fff;
		opacity: 1;
	}
	.home_body_banner .swiper-pagination-bullet-active{
		background: rgb(247, 189, 64);
	}
</style>